<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>之江学院考试</title>
<link href='exam.css' rel='stylesheet' type='text/css'>
</head>
<body>
<h1>
浙江工业大学之江学院20 20 /20 21 学年
<br>
第 1 学期试卷
</h1>
<table class='name' width='100%'>
<tr>
<td colspan='2'>
课程
<span class='filling2'></span>
</td>
<td colspan='2'>
班级
<span class='filling2'></span>
</td>
</tr>
<tr>
<td>
姓名
<span class='filling1'></span>
</td>
<td colspan='2'>
学号
<span class='filling2'></span>
</td>
<td>
教师姓名
<span class='filling1'></span>
</td>
</tr>
</table>
<table border='1' class='score' rules='all' width='85%'>
<tr>
<th>题序</th>
<td>一</td>
<td>二</td>
<td>三</td>
<td>四</td>
<td>五</td>
<td>总分</td>
</tr>
<tr>
<th>计分</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<br>
<div class='page1'>
<h2>填空题(40分)</h2>
<ol>
<li>
HTML中常见的三种列表是：
<span class='filling'></span>
、
<span class='filling'></span>
、
<span class='filling'></span>
</li>
<li>
根据显示形态，CSS把HTML标签 (元素) 分为：
<span class='filling'></span>
、
<span class='filling'></span>
</li>
<li>
<span class='filling'></span>
是和流动相对的概念。它不会破坏文档流，但是会影响显示效果。
</li>
<li>
HTML代码
<xmp class='code'><div><span class="head">你</span>若安好便是晴天</div></xmp>
中, 标签
<span class='filling'></span>
继承标签
<span class='filling'></span>
的样式。
</li>
<li>
若用ID名定位网页元素
<xmp class='code'><p id="zzjc-motto" class="motto">尚德致知、敢为人先</p></xmp>
则选择器为
<span class='filling'></span>
。
</li>
<li>
网页中图片的文字环绕效果是通过
<span class='filling'></span>
实现的。
</li>
<li>
子元素默认具有父元素设置的属性。这叫
<span class='filling'></span>
。
</li>
<li>
网页中每个元素根据
<span class='filling'></span>
模型显示。说出一种方法，来观察盒子大小：
<span class='filling'></span>
。
</li>
<li>
CSS 代码应该写在标签
<span class='filling'></span>
里，而引用外部css文件要写在标签
<span class='filling'></span>
里。JavaScript 代码或者外部 JS 文件都应该写在标签
<span class='filling'></span>
里。
</li>
<li>
写出三种常用 DOM 节点：
<span class='filling'></span>
、
<span class='filling'></span>
、
<span class='filling'></span>
。文档节点的变量名是
<span class='filling'></span>
。
</li>
</ol>
<h2>判断题 (20分)</h2>
<ol>
<li>
CSS 可以嵌入 HTML 文件，也可以写在独立的文件中。
<span class='parenthesis'>
<span class='yes_no'></span>
</span>
</li>
<li>
超级链接默认具有下划线，而且这条下划线无法消除。
<span class='parenthesis'>
<span class='yes_no'></span>
</span>
</li>
<li>
默认设置下，背景图片一般正好覆盖到盒模型的内边距部分。
<span class='parenthesis'>
<span class='yes_no'></span>
</span>
</li>
<li>
JavaScript 和 CSS 都用 link 标签导入外部文件。
<span class='parenthesis'>
<span class='yes_no'></span>
</span>
</li>
<li>
浮动时，子元素不会超出父元素的显示范围。如果父元素没有充足的空间，那么可能会发生形变。
<span class='parenthesis'>
<span class='yes_no'></span>
</span>
</li>
<li>
浮动元素向左浮动时，会挤走同一行的所有非浮动元素。
<span class='parenthesis'>
<span class='yes_no'></span>
</span>
</li>
<li>
列表中列表项总是独立成一段显示，说明列表项是块状元素。
<span class='parenthesis'>
<span class='yes_no'></span>
</span>
</li>
<li>
网页中的每个盒子默认情况下都有浮动效果。
<span class='parenthesis'>
<span class='yes_no'></span>
</span>
</li>
<li>
默认情况下，标签 body 中的JavaScript代码是在当前位置执行，但可以操作HTML任何已经加载好的元素。
<span class='parenthesis'>
<span class='yes_no'></span>
</span>
</li>
<li>
DOM中的文本节点大体上和HTML的标签一一对应。
<span class='parenthesis'>
<span class='yes_no'></span>
</span>
</li>
</ol>
</div>
<footer></footer>
<br>
<header>浙江工业大学之江学院考试命题纸</header>
<div class='page'>
<h2>选择题(20分)</h2>
<ol>
<li>
下面哪个标签书写是正确的？
<span class='parenthesis'>
<span class='choice'></span>
</span>
<ol type='A'>
<li>
<xmp><div>Hello world<div></xmp>
</li>
<li>
<xmp><b>Hello world</b></xmp>
</li>
<li>
<xmp><br>Hello world<br/></xmp>
</li>
<li>
<xmp><span Hello world/></xmp>
</li>
</ol>
</li>
<li>
CSS写法正确的是
<span class='parenthesis'>
<span class='choice'></span>
</span>
<ol type='A'>
<li>
<xmp>span color: red;</xmp>
</li>
<li>
<xmp>div span {text-align: center; float: left;}</xmp>
</li>
<li>
<xmp>div, span {font-size=2em color=red}</xmp>
</li>
<li>
<xmp>div>span {text-shadow:1px,1px,3px;}</xmp>
</li>
</ol>
</li>
<li>
应用下述样式的效果为：
<span class='parenthesis'>
<span class='choice'></span>
</span>
<xmp class='code'>p {color:blue;}
span {font-size: large;
font-weight: bold;}
<p>
<span>秦</span>时明月汉时关，万里长征人未还。但使龙城飞将在，不教胡马度阴山。
</p></xmp>
<ol type='A'>
<li>
<xmp>整首诗蓝色、加粗、放大</xmp>
</li>
<li>
<xmp>整首诗蓝色，第一个字加粗、放大</xmp>
</li>
<li>
<xmp>整首诗蓝色，第一个字加粗、放大但不是蓝色</xmp>
</li>
<li>
<xmp>第一个字加粗、放大；其他字默认字体</xmp>
</li>
</ol>
</li>
<li>
下面哪个选择器的声明语句无法影响“独”字？
<span class='parenthesis'>
<span class='choice'></span>
</span>
<xmp class='code'><div>
<span class="title">九月九日忆山东兄弟[唐] 王维</span>
<p>
<span class="head">独</span>
<span>在异乡为异客，每逢佳节倍思亲。遥知兄弟登高处，遍插茱萸少一人。</span>
</p>
</div></xmp>
<ol type='A'>
<li>
<xmp>div .head</xmp>
</li>
<li>
<xmp>p>span</xmp>
</li>
<li>
<xmp>div>span</xmp>
</li>
<li>
<xmp>.title, .head</xmp>
</li>
</ol>
</li>
<li>
文本美化时, text-shadow 前三个代表大小的数值依次表示
<span class='parenthesis'>
<span class='choice'></span>
</span>
<ol type='A'>
<li>阴影在x轴，y轴，z轴上的偏移</li>
<li>阴影在x轴，y轴上的偏移，颜色编码</li>
<li>RGB颜色编码的三个分量</li>
<li>阴影在x轴，y轴上的偏移，模糊程度</li>
</ol>
</li>
</ol>
</div>
<footer></footer>
<br>
<header>浙江工业大学之江学院考试命题纸</header>
<div class='page'>
<ol start='6'>
<li>
经常逛淘宝的同学知道，不用点击菜单，只要鼠标滑过菜单时，
就会显示一些隐藏的商品信息或高亮一些暗淡的文字。
<br>
这主要是通过什么实现的？
<span class='parenthesis'>
<span class='choice'></span>
</span>
<ol type='A'>
<li>设置text-decoration等文本修饰属性</li>
<li>JavaScript动态特效</li>
<li>CSS动画特效</li>
<li>设置鼠标悬停伪选择器</li>
</ol>
</li>
<li>
B 站主页导航栏其实是一个无序列表。为什么这个无序列表不是纵向排列，而是横向排列？
<span class='parenthesis'>
<span class='choice'></span>
</span>
<ol type='A'>
<li>CSS样式文件丢失</li>
<li>浮动效果</li>
<li>B站服务器故障</li>
<li>浏览器故障</li>
</ol>
</li>
<li>
这是一段HTML代码，已知第二副图被设置为向左浮动，下面说法正确的是
<span class='parenthesis'>
<span class='choice'></span>
</span>
<xmp class='code'>文本0<img src="1.jpg">文本1<img src="2.jpg">文本2</xmp>
<ol type='A'>
<li>第二副图会浮动到最左侧</li>
<li>第二副图会浮动到“文本1”的左侧，但不超过第一幅图</li>
<li>两幅图浮动到最左侧，但不改变两者顺序</li>
<li>两幅图浮动到最左侧，并交换顺序</li>
</ol>
</li>
<li>
百度首页输入本文然后点击搜索，就能显示一系列相关网页。这种人机互动效果是用什么技术实现的？
<span class='parenthesis'>
<span class='choice'></span>
</span>
<ol type='A'>
<li>CSS 布局</li>
<li>运行 JavaScript 脚本</li>
<li>注册 click 事件</li>
<li>CSS 伪选择器+动画效果</li>
</ol>
</li>
<li>
浏览器解析下面的HTML代码，会有什么特效
<span class='parenthesis'>
<span class='choice'></span>
</span>
<xmp class='code'>
<h1>修改字母</h1>
<span>A</span>
<script type='text/javascript'>
spans[0].innerText = 'B'
spans = document.getElementsByTagName('span')
function f(){
spans[0].innerText = 'C'
}
span.onclick = function () {}
</script>
</xmp>
<ol type='A'>
<li>有特效，鼠标点击字母A变成C</li>
<li>有特效，鼠标点击字母A变成B</li>
<li>没有特效，显示字母B</li>
<li>没有特效，显示两个字母AB</li>
</ol>
</li>
</ol>
</div>
<footer></footer>
<br>
<header>浙江工业大学之江学院考试命题纸</header>
<div class='page'>
<h2>简答题(20分)</h2>
<ol>
<li>
用CSS，实现文本居中: 大标题居中，段落中第二行居中并设置蓝色。（6分）
<xmp class='code'>
<h1 class="c">这是大标题</h1>
<p>这是段落
<span class="c">这是要居中的文本; 设置成蓝色<span>
<span class="d">这是不要居中的文本; 默认显示<span>
</p>
</xmp>
<div class='solve'>
<xmp class='code'>
1
2
3
4
5
6
7
8
9
10
11
12
</xmp>
</div>
</li>
<li>
下面是一段文章。标题居中；第一个词放大到4倍，加粗，其余文字环绕。(8分)
<xmp class='code'>
<article>
<div class="title">荷塘月色</div>
<address>朱自清</address>
<p>
<span class="moonlight">月光</span>如流水一般，静静地泻在这一片叶子和花上。
薄薄的青雾浮起在荷塘里。
叶子和花仿佛在牛乳中洗过一样；又像笼着轻纱的梦。
虽然是满月，天上却有一层淡淡的云，所以不能朗照；
但我以为这恰是到了好处——酣眠固不可少，小睡也别有风味的。
月光是隔了树照过来的，高处丛生的灌木，落下参差的斑驳的黑影，峭楞楞如鬼一般；
弯弯的杨柳的稀疏的倩影，却又像是画在荷叶上。
塘中的月色并不均匀；但光与影有着和谐的旋律，如梵婀玲上奏着的名曲。
</p>
</article>
</xmp>
<div class='solve'>
<xmp class='code'>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
</xmp>
</div>
</li>
</ol>
</div>
<footer></footer>
<br>
<header>浙江工业大学之江学院考试命题纸</header>
<div class='page'>
<ol start='3'>
<li>
下面是之江学院首页导航栏列表（已经简化）。已知这个文档节点中第一个列表节点。怎样用 DOM 合理地把“本科教育”改为“学生风貌”？（6分）
<xmp class='code'>
<ul>
<li>学院概况</li>
<li>院部设置</li>
<li>师资队伍</li>
<li>教学研究</li>
<li>本科教育</li>
<li>更多</li>
</ul>
</xmp>
<div class='solve'>
<xmp class='code'>
1
2
3
4
5
6
7
8
9
10
11
12
</xmp>
</div>
</li>
</ol>
</div>
<footer></footer>
</body>
</html>
